<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    /* 设置outer样式 */
    #outer {
      width: 520px;
      height: 375px;
      /* 居中 */
      margin: 50px auto;
      /* 背景颜色 */
      background-color: blueviolet;
      padding: 10px 0;
      /* 开启相对定位 */
      position: relative;
      /* 裁剪溢出内容 */
      overflow: hidden;
    }

    #imgList {
      /* 去除项目符号 */
      list-style: none;
      /* 设置宽度 */
      /* width: 2600px; */
      /* 绝对定位 */
      position: absolute;
      /* 设置偏移量 */
      transition: 2s;
    }

    #imgList li {
      /* 设置浮动 */
      float: left;
      /* 设置左右宽度 */
      margin: 0 10px;
    }

    /* 设置导航按钮 */
    #navDiv {
      /* 开启绝对定位 */
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
    }

    #navDiv a {
      float: left;
      width: 10px;
      height: 10px;
      background-color: red;
      /* 设置外边距 */
      margin: 0 5px;
      opacity: 0.5;
      /* 兼容ie8 */
      filter: alpha(opacity=50);
    }

    #navDiv a:hover {
      background-color: black;
    }
  </style>
  <script>
    window.onload = function () {
      // 获取imgList的宽度
      // 获取imgList
      var imgList = document.getElementById("imgList");
      var imgArr = document.getElementsByTagName("img");
      // 设置imglist的宽度
      imgList.style.width = 520 * imgArr.length + "px";

      // 默认图片的索引
      let index = 0;
      // 获取所有的a
      var allA = document.getElementsByTagName("a");
      allA[index].style.backgroundColor = "black";

      // 点击超链接切换到指定图片
      // 点击第一个超链接， 显示第一个图片

      // 为所有的超链接都绑定单击响应函数
      for (var i = 0; i < allA.length; i++) {
        // 为每一个超链接都添加一个num属性
        allA[i].num = i;


        // 为超链接绑定单击响应函数
        allA[i].onclick = function () {
          // 获取点击超链接的索引，并将其设置为index
          index = this.num;
          // 切换图片
          imgList.style.left = - 520 * index + "px"
          // 修改正在选中的a
          setA();
        }
      }
      // 创建一个方法用来设置选中的a
      function setA() {
        // for (const i of allA.length) {
        //     allA[i].style.backgroundColor = "red";
        // }
        for (var i = 0; i < allA.length; i++) {
          allA[i].style.backgroundColor = "";
        }

        allA[index].style.backgroundColor = "black";
      }
    };
  </script>
</head>

<body>
  <!-- 创建一个外部容器div -->
  <div id="outer">
    <!-- 创建一个ul，用来放置图片 -->
    <ul id="imgList">
      <li><img src="img/1.jpg" alt="" /></li>
      <li><img src="img/2.jpg" alt="" /></li>
      <li><img src="img/3.jpg" alt="" /></li>
      <li><img src="img/4.jpg" alt="" /></li>
      <li><img src="img/5.jpg" alt="" /></li>
    </ul>
    <!-- 创建导航按钮 -->
    <div id="navDiv">
      <a href="javascript:"></a>
      <a href="javascript:"></a>
      <a href="javascript:"></a>
      <a href="javascript:"></a>
      <a href="javascript:"></a>
    </div>
  </div>
</body>

</html>